<template>
  <div class="dashboard-container">
    <!-- 这是面包屑导航 -->
    <el-breadcrumb
      v-if="this.paramsId == undefined ? false : true"
      separator-class="el-icon-arrow-right"
    >
      <el-breadcrumb-item>学科管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{
        this.$route.params.subjectName
      }}</el-breadcrumb-item>
      <el-breadcrumb-item>目录管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 这是面包屑导航结束 -->
    <div class="app-container">
      <!-- 这是搜索框 -->
      <el-row class="search">
        <div class="search-left">
          <el-form
            ref="directorysForm"
            :inline="true"
            :model="directorysForm"
            class="demo-form-inline"
          >
            <el-form-item prop="user" label="目录名称">
              <el-input v-model="directorysForm.user"></el-input>
            </el-form-item>
            <el-form-item prop="region" label="状态">
              <el-select v-model="directorysForm.region" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clearSearch">清除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="
                  onSearchDirectorys(directorysForm.user, directorysForm.region)
                "
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="search-right">
          <el-button
            class="el-icon-edit"
            type="success"
            size="small"
            @click="addDirectorysList"
          >
            新增目录</el-button
          >
        </div>
      </el-row>
      <!-- 搜索框结束 -->

      <!-- 这是提示 -->
      <el-row class="data-tips">
        <i class="el-icon-info"></i>
        数据一共 {{ totalLength }} 条
      </el-row>
      <!-- 提示结束 -->

      <!-- 这是表单 -->
      <el-table :data="directorysList" style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="directoryName" label="目录名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="160">
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.state == 1">已启用</div>
            <div v-else>已禁用</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          class="operating"
          label="操作"
          width="150"
        >
          <template slot-scope="scope">
            <button @click="disenable(scope.row)">
              <span v-if="scope.row.state == 1">启用</span>
              <span v-else>禁用</span>
            </button>

            <span v-if="scope.row.state == 1">
              <button
                class="b"
                @click="
                  reviseDirectorys(
                    scope.row.id,
                    scope.row.subjectID,
                    scope.row.subjectName,
                    scope.row.directoryName
                  )
                "
              >
                修改
              </button>
              <button class="b" @click="removeDirectorys(scope.row.id)">
                删除
              </button>
            </span>
            <span v-else>
              <button class="a">修改</button>
              <button class="a">删除</button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 这是表单结束 -->

      <!-- 这是分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="
            handleSizeChange(directorysForm.user, directorysForm.region, $event)
          "
          @current-change="
            handleCurrentChange(
              directorysForm.user,
              directorysForm.region,
              $event
            )
          "
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="prev, pager, next, sizes, jumper"
          :total="totalLength"
        >
        </el-pagination>
      </div>
      <!-- 这是分页结束 -->

      <!-- 这是增加学科的模板 -->
      <el-dialog :title="directorysId" :visible.sync="dialogFormVisible">
        <el-form ref="clearAdd" :model="directorys">
          <el-form-item
            v-if="this.paramsId == undefined ? true : false"
            label="所属学科"
            prop="list"
            label-width="80px"
          >
            <el-select
              v-model="directorys.list"
              placeholder="请选择"
              width="400px"
            >
              <el-option
                v-for="(item, index) in directorysSubjectList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="ipt" label-width="80px">
            <el-input
              v-model="directorys.ipt"
              placeholder="请输入目录名称"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onAddSubjectList">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 这是增加学科的模板结束 -->
    </div>
  </div>
</template>

<script>
import {
  list,
  add,
  changeState,
  update,
  remove
} from '../../api/hmmm/directorys'
import { simple } from '../../api/hmmm/subjects'

export default {
  name: 'directorysPage',
  components: {},
  props: {},
  data() {
    return {
      // 传参的 id
      paramsId: '',
      // 这是学科id
      directorysId: '新增目录',
      // 这是学科的列表
      directorysSubjectList: [],
      // 这里是搜索框的数据
      searchNameInput: '',
      directorysForm: {
        user: '',
        regoin: ''
      },
      value: '',
      // 这是表单的数据
      directorysList: [],
      // 这是当前页码
      currentPage: 1,
      pageSize: 5,
      totalLength: 0,
      // 这是控制增加目录的
      dialogFormVisible: false,
      directorys: {
        list: '',
        ipt: ''
      },
      addSubjectRules: {
        ipt: [{ required: true, message: '请输入学科名称', trigger: 'blur' }]
      },
      // 这是修改目录的数据
      changeDirectoryId: '',
      changeSubId: '',
      changeDirectoryFlag: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.paramsId = this.$route.params.id
    this.getDirectorysList()
    this.onDirectorysSubjectList()
  },
  mounted() {},
  methods: {
    // 这是搜索清除
    clearSearch() {
      this.$refs.directorysForm.resetFields()
    },
    // 这是搜索请求
    async onSearchDirectorys(ipt, item) {
      this.paramsId = undefined
      try {
        const { data } = await list({
          page: this.currentPage,
          pagesize: this.pageSize,
          directoryName: ipt,
          state: item
        })
        this.directorysList = data.items
        this.totalLength = data.counts
      } catch (error) {
        this.$message.error('搜索目录数据失败，请稍后重新获取')
      }
    },
    // 这是添加目录
    addDirectorysList() {
      this.directorys.ipt = ''
      this.directorys.list = ''
      this.directorysId = '新增目录'
      this.dialogFormVisible = true
    },
    // 这是点击分页的页码
    handleSizeChange(ipt, item, val) {
      this.pageSize = val
      if (ipt || item) {
        this.onSearchDirectorys(ipt, item)
      } else {
        this.getDirectorysList()
      }
    },
    handleCurrentChange(ipt, item, val) {
      this.currentPage = val
      if (ipt || item) {
        this.onSearchDirectorys(ipt, item)
      } else {
        this.getDirectorysList()
      }
    },
    // 这是获取标签列表
    async getDirectorysList() {
      if (this.paramsId) {
        try {
          const { data } = await list({
            page: this.currentPage,
            pagesize: this.pageSize,
            subjectID: this.paramsId
          })
          this.totalLength = data.counts
          this.directorysList = data.items
        } catch (error) {
          this.$message.error('获取目录数据失败，请稍后重新获取')
        }
      } else {
        try {
          const { data } = await list({
            page: this.currentPage,
            pagesize: this.pageSize
          })
          this.totalLength = data.counts
          this.directorysList = data.items
        } catch (error) {
          this.$message.error('获取目录数据失败，请稍后重新获取')
        }
      }
    },
    // 这是增加 和 修改 目录
    async onDirectorysSubjectList() {
      const { data } = await simple()
      this.directorysSubjectList = data
    },
    async onAddSubjectList() {
      if (this.changeDirectoryFlag) {
        try {
          await update({
            id: this.changeDirectoryId,
            subjectID: this.changeSubId,
            directoryName: this.directorys.ipt
          })
          this.$message.success('修改目录成功')
          this.getDirectorysList()
        } catch (error) {
          this.$message.error('修改目录失败，请稍后再试')
        }
      } else {
        if (this.paramsId === undefined) {
          try {
            await add({
              subjectID: this.directorys.list,
              directoryName: this.directorys.ipt
            })
            this.$message.success('添加目录成功')
            this.getDirectorysList()
          } catch (error) {
            this.$message.error('添加失败')
          }
        } else {
          try {
            await add({
              subjectID: this.paramsId,
              directoryName: this.directorys.ipt
            })
            this.$message.success('添加目录成功')
            this.getDirectorysList()
          } catch (error) {
            this.$message.error('添加失败')
          }
        }
      }
      this.dialogFormVisible = false
      this.$refs.clearAdd.resetFields()
      this.changeDirectoryFlag = false
    },
    // 这个是启用禁用按钮
    async disenable(id) {
      if (id.state === 1) {
        await changeState({ id: id.id, state: 0 })
      } else if (id.state === 0) {
        await changeState({ id: id.id, state: 1 })
      }
      this.getDirectorysList()
    },
    // 这是修改目录
    reviseDirectorys(id, subId, subject, directory) {
      this.changeDirectoryFlag = true
      this.changeDirectoryId = id
      this.changeSubId = subId
      this.directorys.ipt = directory
      this.directorys.list = subject
      this.directorysId = '修改目录'
      this.dialogFormVisible = true
    },
    // 这是删除目录
    async removeDirectorys(id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该目录, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      try {
        await remove({ id: id })
        this.$message.success('删除成功')
        this.getDirectorysList()
      } catch (error) {
        this.$message.error('删除失败，请稍后再试')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 10px 0;
  .el-breadcrumb {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    padding: 18px 20px;
    border-bottom: 1px solid #ebeef5;
    background-color: #fff;
    border-radius: 4px 4px 0 0;
  }
  .app-container {
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    padding: 20px;
    background-color: #fff;

    .search {
      .el-form-item {
        display: inline-block;
      }
      .search-left {
        margin-bottom: -30px;
        float: left;
        span {
          display: inline-block;
          text-align: right;
          line-height: 32px;
          width: 80px;
          height: 32px;
          font-size: 14px;
          color: #606266;
          padding: 0 12px 0 0;
          font-weight: 700;
        }

        .el-input,
        .el-select {
          width: 200px;
          height: 32px !important;
          line-height: 32px;
          margin-right: 10px;
        }
        ::v-deep .el-input__inner {
          width: 200px;
          height: 32px !important;
          line-height: 32px;
          margin-right: 10px;
        }
        ::v-deep .el-select__caret {
          line-height: 32px;
        }
        .el-button {
          display: inline-block;
          padding: 9px 15px;
          font-size: 12px;
        }
      }
      .search-right {
        float: right;
      }
    }
    .search::before,
    .search::after {
      content: '';
      display: table;
    }
    .search::after {
      clear: both;
    }
    .data-tips {
      display: block;
      background-color: #f4f4f5;
      color: #909399;
      width: 100%;
      font-size: 13px;
      margin-bottom: 15px;
      margin-top: 20px;
      border-radius: 4px;
      padding: 11px 16px;
      i {
        display: inline-block;
        font-size: 16px;
        line-height: 1;
        font-variant: normal;
        margin-right: 5px;
      }
    }

    .el-table {
      .el-table-column {
        width: 0;
        padding: 0 80px;
      }
      button {
        border: none;
        outline: none;
        background-color: transparent;
        cursor: pointer;
      }
      span {
        color: #409eff;
      }
    }
    ::v-deep .pagination {
      margin-top: 20px;
      text-align: right;
      .el-pagination__sizes {
        margin-right: -16px;
      }
    }
    ::v-deep .el-dialog {
      width: 400px;
    }
    ::v-deep .el-form-item__label {
      width: 80px !important;
    }
    .el-select {
      width: 100%;
    }

    ::v-deep .el-input__inner {
      width: 100%;
      height: 32px;
    }
    .dialog-footer {
      text-align: right;
    }
    .a {
      color: #ccc;
    }
    .a:hover {
      cursor: not-allowed;
    }
    .b {
      color: #409eff;
    }
  }
}
</style>
